<template>
  <div class="wrap">
    <!--取点方式-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{$t('message.CreateFacePoints.type')}}：</label>
      <el-select class="flex-grow-1" v-model="params.selectType" value-key="id">
        <el-option :key="0" :label="$t('message.CreateFacePoints.equalDivisionPointSampling')" :value="0"/>
        <el-option :key="1" :label="$t('message.CreateFacePoints.uniformSampling')" :value="1"/>
        <el-option :key="2" :label="$t('message.CreateFacePoints.curvatureBasedSampling')" :value="2"/>
      </el-select>
    </div>

    <!--    曲面-->
    <div class="d-flex align-items-center">
      <query-list
              :tipMsg="$t('message.CreateFacePoints.selectSplineFace')"
              v-model="params.splineFace"
              @removeItem="removeSelect"
              :active="params.queryListActiveMap.splineFace"
              @switchQuery="switchQuery('splineFace')"/>
    </div>

    <!--UV等分取点法-->
    <div v-if="params.selectType === 0">
      <div class="d-flex align-items-center">
        <label class="el-form-item__label">{{ $t('message.CreateFacePoints.uCount') }}：</label>
        <el-input id="uInputCount"
                  v-model="params.uInputCount"
                  min="1" step="10"
                  type="number"
                  @focus="focus('uInputCount')"
                  @change="changeValue('uInputCount')" />
      </div>
      <div class="d-flex align-items-center">
        <label class="el-form-item__label">{{ $t('message.CreateFacePoints.vCount') }}：</label>
        <el-input id="vInputCount"
                  v-model="params.vInputCount"
                  min="1"
                  step="10"
                  type="number"
                  @focus="focus('vInputCount')"
                  @change="changeValue('vInputCount')"/>
      </div>
      <!--方向内核未提供参数，暂时注释掉-->
<!--      <div class="d-flex align-items-center">-->
<!--        <query-list-->
<!--                :tipMsg="$t('message.CreateFacePoints.uDirection')"-->
<!--                v-model="params.uDirection"-->
<!--                :active="params.queryListActiveMap.uDirection"-->
<!--                @switchQuery="switchQuery('uDirection')"/>-->
<!--      </div>-->
<!--      <div class="d-flex align-items-center">-->
<!--        <query-list-->
<!--                :tipMsg="$t('message.CreateFacePoints.vDirection')"-->
<!--                v-model="params.vDirection"-->
<!--                :active="params.queryListActiveMap.vDirection"-->
<!--                @switchQuery="switchQuery('vDirection')"/>-->
<!--      </div>-->
    </div>

<!--    <div class="d-flex align-items-center" v-else-if="params.selectType === 1">-->
<!--      <label class="el-form-item__label">{{$t('message.CreateFacePoints.plane')}}：</label>-->
<!--    </div>-->
<!--    &lt;!&ndash;截面按曲率取点法&ndash;&gt;-->
<!--    <div class="d-flex align-items-center" v-else-if="params.selectType === 2">-->
<!--      <label class="el-form-item__label">{{$t('message.CreateFacePoints.plane')}}：</label>-->
<!--    </div>-->
    <!--截面均匀取点法/截面按曲率取点法-->
    <div v-else>
      <!--    平面-->
      <div class="d-flex align-items-center">
        <query-list
                :tipMsg="$t('message.CreateFacePoints.selectPlane')"
                v-model="params.plane"
                @removeItem="removeSelect"
                :active="params.queryListActiveMap.plane"
                @switchQuery="switchQuery('plane')"/>
      </div>
<!--      cutType: "截面偏移类型",-->
<!--      equalDistance: "等间距",-->
<!--      specifiedNumber: "指定个数",-->
<!--      intervalDistance: "间距值",-->
<!--      sectionNumber: "截面数量",-->
      <div class="d-flex align-items-center">
        <label class="el-form-item__label">{{ $t('message.CreateFacePoints.cutType') }}：</label>
        <el-select class="flex-grow-1" v-model="params.cutType" value-key="id">
          <el-option :key="0" :label="$t('message.CreateFacePoints.equalDistance')" :value="0"/>
          <el-option :key="1" :label="$t('message.CreateFacePoints.specifiedNumber')" :value="1"/>
        </el-select>
      </div>
      <div v-if="params.cutType === 0" class="d-flex align-items-center">
        <label class="el-form-item__label">{{ $t('message.CreateFacePoints.intervalDistance') }}：</label>
        <el-input id="intervalDistance"
                  v-model="params.intervalDistance"
                  min="1"
                  step="1"
                  type="number"
                  @focus="focus('intervalDistance')"
                  @change="changeValue('intervalDistance')"/>
      </div>
      <div v-else class="d-flex align-items-center">
        <label class="el-form-item__label">{{ $t('message.CreateFacePoints.sectionNumber') }}：</label>
        <el-input id="sectionNumber"
                  v-model="params.sectionNumber"
                  min="1"
                  step="1"
                  type="number"
                  @focus="focus('sectionNumber')"
                  @change="changeValue('sectionNumber')"/>
      </div>
<!--      <div class="d-flex align-items-center">-->
<!--        <label class="el-form-item__label">{{ $t('message.CreateFacePoints.pickPointsNum') }}：</label>-->
<!--        <el-input v-model="params.pointNum" min="50" step="10" type="number"/>-->
<!--      </div>-->
    </div>

    <div class="btn">
      <el-button type="primary" :disabled="isDisabled()"
                 @click="confirm(false)">
        {{ $t('message.CreateFacePoints.takePoints') }}
      </el-button>
      <el-button type="primary" :disabled="isDisabled()"
                 @click="confirm()">
        {{ $t('message.CreateFacePoints.download') }}
      </el-button>
      <el-button @click="close">{{ $t('message.CreateFacePoints.close') }}</el-button>
    </div>
  </div>

</template>

<script>
import {facePointsCommand} from "../../Command/FacePointsCommand";
import DialogMixin from "./DialogMixin";
import {ElementType} from "../../modeling/TypeDefine";
import {Axis, Point} from "../../../nodeApp/static/lib/crowncad-plugin-sdk-0.0.1";

export default {
  mixins: [DialogMixin],
  data() {
    return {
      params: {
        plane: [],
        splineFace: [],
        queryListActiveMap: {
          splineFace: 1,
          plane: 0,
          uDirection: 0,
          vDirection: 0,
        },
        pointNum: 100,
        selectType: 0,//取点方式 0：UV等分取点法  1：截面均匀取点法  2：截面按曲率取点法
        uInputCount: 50,
        vInputCount: 50,
        uDirection: [],
        vDirection: [],
        cutType: 0,//截面偏移类型 0：等间距  1：指定个数
        intervalDistance: 10,
        sectionNumber: 10,
      },
      originValue: 1,
    }
  },

  mounted() {
    facePointsCommand.init(400, 250, 200, () => {
      facePointsCommand.setSelectType([ElementType.SURFACE, ElementType.FACE]);
      facePointsCommand.handlePickElement(res => {
        res?.element?.forEach(data => {
          let element = data.element;
          if (!element) {
            return;
          }
          //曲面数据写入
          if (this.params.queryListActiveMap.splineFace === 1) {
            this.params.splineFace.splice(0);
            this.params.splineFace.push(element);
            if (this.params.selectType != 0) {
              this.switchQuery("plane");
            }
          } else if (this.params.queryListActiveMap.plane === 1) {// 截面数据写入
            this.params.plane.splice(0);
            this.params.plane.push(element);
          }
          if (this.params.selectType === 0) {
            //U向方向
            let axis = new Axis();
            if (this.params.queryListActiveMap.uDirection === 1) {
              if (element.type === ElementType.EDGE || element.type === ElementType.DATUMLINE) {
                this.params.uDirection.splice(0);
                axis.setLineId(element.id);
                this.params.uDirection.push(element);
              } else if (element.type === ElementType.POINT ||
                      element.type === ElementType.ORIGINPOINT ||
                      element.type === ElementType.VERTEX) {
                if (this.params.uDirection.length === 1) {
                  let pos1 = this.params.uDirection[0]?.position;
                  let pos2 = element?.position;
                  axis.setPoint(new Point(pos1.x, pos1.y, pos1.z), new Point(pos2.x, pos2.y, pos2.z));
                } else if (this.params.uDirection.length === 2) {
                  this.params.uDirection.splice(0);
                }
                this.params.uDirection.push(element);
              }
            }
            //V向方向
            if (this.params.queryListActiveMap.vDirection === 1) {
              if (element.type === ElementType.EDGE ||
                      element.type === ElementType.DATUMLINE
                      || this.params.vDirection.length === 2) {
                this.params.vDirection.splice(0);
              }
              this.params.vDirection.push(element);
            }
          }
        })
      });
    });
  },

  methods: {
    focus(name) {
      this.originValue = this.params[name];
    },
    changeValue(name) {
      let element = document.getElementById(name);
      if (element) {
        let minValue = Number(element.min);
        let maxValue = Number(element.max);
        let value = this.params[name];
        if ((maxValue <= 0 && value < minValue) || (maxValue > 0 && (value < minValue || value > maxValue))) {
          this.params[name] = this.originValue;
        }
      }
    },
    isDisabled() {
      if ((this.params.selectType === 0 && this.params.splineFace.length === 0) ||
              (this.params.selectType != 0 && (this.params.splineFace.length === 0 || this.params.plane.length === 0))) {
        return true;
      } else {
        return false;
      }
    },
    // 确定处理
    confirm(isSave = true) {
      let facePointsParams = {};
      if (this.params.splineFace.length <= 0) {
        facePointsCommand.eventBusAlertMsg("请选择需要取点的曲面！", "warning");
        return;
      }
      let uNums = this.params.uInputCount;
      let vNums = this.params.vInputCount;
      if (this.params.selectType === 0) {
        if (uNums <= 0 || vNums <= 0) {
          facePointsCommand.eventBusAlertMsg("输入个数必须大于0！", "warning");
          return;
        }
      } else {
        if (this.params.plane.length <= 0) {
          facePointsCommand.eventBusAlertMsg("请选择一个截取面！", "warning");
          return;
        }
      }

      let cutSrfId = this.params.selectType === 0 ? -1 : this.params.plane[0]?.id;
      let cutType = this.params.cutType;
      let polyType = this.params.selectType === 1 ? 0 : 1;
      let length = this.params.intervalDistance;
      let srfNums = this.params.sectionNumber;
      facePointsParams['SolidBaseSrfId'] = this.params.splineFace[0]?.id;
      facePointsParams['UNumbers'] = uNums;
      facePointsParams['VNumbers'] = vNums;
      facePointsParams['CutSrfId'] = cutSrfId;
      facePointsParams['CutType'] = cutType;
      facePointsParams['PolyType'] = polyType;
      facePointsParams['Length'] = length;
      facePointsParams['SrfNums'] = srfNums;
      let params = {
        isSave: isSave,
        facePointsParams: facePointsParams,
      }
      // 调用计算接口
      facePointsCommand.computeFacePoints(params, (res) => {
        console.log(res.data);
      });
    },

    // 切换激活的button按钮
    switchQuery(name) {
      for (const key in this.params.queryListActiveMap) {
        this.params.queryListActiveMap[key] = key === name ? 1 : 0;
      }
      let filterType = [];
      if (this.params.queryListActiveMap.plane === 1) {
        filterType = [ElementType.FACE, ElementType.DATUMPLANE];
      } else if (this.params.queryListActiveMap.splineFace === 1) {
        filterType = [ElementType.SURFACE, ElementType.FACE];
      } else if (this.params.queryListActiveMap.uDirection === 1 || this.params.queryListActiveMap.vDirection === 1) {
        filterType = [ElementType.EDGE, ElementType.DATUMLINE, ElementType.POINT, ElementType.ORIGINPOINT, ElementType.VERTEX];
      }
      facePointsCommand.setSelectType(filterType);
    },

    removeSelect(item) {
      if (item) {
        facePointsCommand.clearHighLightElements([item.id]);
      }
    },

    changePluginContainerHeight() {
      facePointsCommand.changePluginContainerHeight({minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight})
    },

    close() {
      facePointsCommand.closeActiveCmd();
    }
  },

  computed: {},

  watch: {
    "params.selectType": function () {
      if (this.params.selectType != 0) {
        if (this.params.splineFace.length === 0 && this.params.queryListActiveMap.splineFace != 1) {
          this.switchQuery("splineFace");
        } else if (this.params.splineFace.length > 0 && this.params.plane.length === 0) {
          this.switchQuery("plane");
        }
      } else if (this.params.queryListActiveMap.splineFace != 1){
        this.switchQuery("splineFace");
      }
    }
  },

  destroyed() {
  }
}

</script>

<style scoped>
.wrap {
  font-size: 12px;
}
</style>